<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    .container{
        width: 600px;
        margin: 0 auto;
    }

    h1 {
        text-align: center;
    }

    p {
        color: #555;
        text-align: center;
    }
    
    .row {
        display: flex;
        /* 水平居中 */
        justify-content: center;
        /* 垂直居中 */
        align-items: center;
    }

    .row span {
        width: 120px;
    }

    .row input {
        height: 30px;
        width: 205px;
        margin-top: 5px;
    }

    .row button {
        margin-top: 5px;
        height: 30px;
        width: 330px;
        border: none;
        border-radius: 5px;
        background-color: green;
    }

    /* 点击时, 发生颜色变化, 更清晰的表面已经点击 */
    .row button:active {
        background-color: #555;
    }


</style>

<body>
    <!-- 表白墙容器 -->
    <div class="container">

        <h1>表白墙</h1>
        <p>输入内容点击提交, 即可发送表白, 快来试试吧!</p>

        <!-- 第一行 -->
        <div class="row">
            <span>谁: </span>
            <input type="text">
        </div>

        <!-- 第二行 -->
        <div class="row">
            <span>对谁: </span>
            <input type="text">
        </div>


        <!-- 第三行 -->
        <div class="row">
            <span>说: </span>
            <input type="text">
        </div>

        <div class="row">
            <button id="sumbit">提交</button>
        </div>

        <div class="row">
            <button id="revers">撤销</button>
        </div>

    </div>

    <script>
        let inputs = document.querySelectorAll('input');
        let button = document.querySelector('#sumbit');
        let containerDiv = document.querySelector('.container');
        button.onclick = function() {
            // 分别取出三个input中的内容
            let from = inputs[0].value;
            let to = inputs[1].value;
            let massage = inputs[2].value;

            // 发送之前判定是否有内容为空
            if(from == ' ' || to == ' ' || massage =='') {
                return;
            }
            // 构造一个新的 div 添加到原本的表白墙下面
            // 新增一个 div 标签存储表白后的内容并在底下追加该内容
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row massage'; // 设置为 row 使用上面统一 css 样式
            rowDiv.innerHTML = from + " 对 " +  to + " 说: " + massage
            
            // 添加到 container 中
            containerDiv.appendChild(rowDiv);

            // 点击提交之后 清空内容
            for(let input of inputs) {
                input.value = ' ';
            }
        }

        let reversButton = document.querySelector('#revers');
        reversButton.onclick = function() {
            // 选中所有的 row 行 删除最后一行 row
            let rows = document.querySelectorAll('.massage');
            // 当这一条消息为空  或者 没有消息 直接返回
            if(rows == null || rows.length == 0) {
                return;
            }
            containerDiv.removeChild(rows[rows.length - 1]);
        }

    </script>

</body>
</html>